<!DOCTYPE html>
<html>
<head>
    <title> 树表</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../../resources/css/pluginsExt/standard/standard.css" type="text/css">
    <script type="text/javascript" src="../../resources/js/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="../../resources/js/plugins/ztree/jquery.ztree.all-3.5.min.js"></script>
</head>
<body style="overflow: hidden">
<div id="wrapper">
    <div id="page-wrapper" class="gray-bg">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="content_wrap  col-md-2" style="z-index: 2000">
                    <div class="zTreeDemoBackground left">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
                <iframe id="norm"  src="norm.html" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var ifh=document.getElementsByTagName('iframe')[0];
    ifh.height=document.documentElement.clientHeight-100;
    $('ul.ztree').height(document.documentElement.clientHeight-150);
    var abc;
    var pilis=$('.nav-pills li');
    abc=ifwa(pilis[0])
    pilis.on('click',function(e){
        $(this).attr('class','active').siblings().attr('class','')
        if($(this).children().attr('id')!='norm'){
            $('.tab-content').hide()
        }else{
            $('.tab-content').show()
        }
        e.preventDefault();
        var obj=$(this)
        ifwa(obj);
        abc=ifwa(obj);
    });
    function ifwa(obj){
        //更换iframe
        var ifSrc=$(obj).children().attr('href');
        $('iframe').attr('src',ifSrc)
        var nowLi=$(obj).children().attr('id');
        //更换当前编辑按钮链接的窗口
        return nowLi;
    };
    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        view: {
            selectedMulti: false
        },
        callback: {
            onClick: zTreeOnClick
        }
    };
    function zTreeOnClick(event, treeId, treeNode) {
        var cont=treeNode.src;
        $('iframe').attr('src',cont)
    };

    var zNodes =[
        { id:1, pId:0, name:"杂志管理", open:true,},
        { id:11, pId:1, name:"杂志期数",open:true,},
        { id:1111, pId:11, name:"2016-7-11",open:true,src:'redTea.html'},
        { id:1112, pId:11, name:"2016-9-21",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1113, pId:11, name:"2016-8-16",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1114, pId:11, name:"2016-7-23",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1115, pId:11, name:"2016-6-19",src:'../bootstrap-fileinput/fileinput.html'},
        { id:1116, pId:11, name:"2016-10-21",src:'../bootstrap-fileinput/fileinput.html'},
    ];

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        var treeObj = $.fn.zTree.getZTreeObj("tree");
    });

    $(function(){
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        var node = zTree.getNodeByParam("id", 1111, null);
        zTree.selectNode(node);
    })
</script>
</html>